<template>
  <div class="q-pa-md">
    <div class="q-gutter-md" style="max-width: 500px">
           <t-textarea
      v-model="text"
      :borderless="true"
      labelPosition="left"
      @focus="handleFocus"
      label="focus事件"
    />
        <t-textarea
      v-model="text"
      :borderless="true"
      @change="handleChange"
      labelPosition="left"
      label="change事件"
    />
        <t-textarea
      v-model="text"
      :borderless="true"
      @blur="handleBlur"
      labelPosition="left"
      label="blur事件"
    />
        <t-textarea
      v-model="text"
      :borderless="true"
      labelPosition="left"
      @click="handleClick"
      label="click事件"
    />
            <t-textarea
      v-model="text"
      :borderless="true"
      labelPosition="left"
      @keydown="keydown"
      label="keydown事件"
    />
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
       const  refTextarea = ref(null)
      return {
        refTextarea,
        text: ref(''),
        validate:ref(''),
                handleFocus(){
          alert('focus事件')
        },
            handleChange(){
          alert('change事件')
        },
            handleBlur(){
          alert('blur事件')
        },
            handleClick(){
          alert('click事件')
        },
            handleKeydown(){
          alert('keydown事件')
        },
      };
    },
  };
</script>
